<template>
	<view class="su-attachment">
		<view class="su-file view">
			<view class="su-item su-flex-row" v-for="(item, key) in list" :key="key">
				<view class="file-icon su-flex-row">
					<image mode="aspectFill" :src="getIconUrl(item.docName,item.fileID)"></image>
				</view>
				<view class="file-content" @click="_preview(item)">
					<text class="name su-nowrap">{{item.docName}}</text>
					<text class="size">{{byteString(item.size)}}</text>
				</view>
				<view class="file-operation" v-if="candown" @click="_downloadFile(item)">
					<view class="download">
						<text class="iconfont">&#xe651;</text>
						<text class="text">下载</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Utils from "@/common/js/utils.js"
	export default {
		data() {
			return {
				list:[],
				candown:true
			}
		},
		computed:{
			//获取文件图标地址
			getIconUrl(docName,fileID){
				return function(docName,fileID){
					return uni.doc.getIcon(docName,fileID)
				}
			},
			//将字节数量转换为kb,mb等
			byteString(byte){
				return function(byte){
					return Utils.byteConvert(byte)
				}
			}
		},
		onLoad() {
			var value = uni.getStorageSync("attView")
			try {
			  value = JSON.parse(value)
			} catch (error) {
			  value = {}
			}
			var {canDownload,attData} = value
			this.candown = canDownload
			this.list = attData
			uni.removeStorage({key : "attView"})
		},
		methods:{
			/*预览文件*/
			_preview(item){
				var {docName,fileID} = item
				uni.doc.filePreview(docName,fileID)
			},
			/*下载文件*/
			_downloadFile(item){
				var {docName,fileID} = item
				uni.doc.downloadFile(docName,fileID)
			}
		}
	}
</script>

<style lang="scss">
	@import "./attachment.scss";
	page {
		background-color: #f8f8f8;
	}
	.su-file.view {
		background-color: #ffffff;
		padding: 30upx;
	}
	.file-operation:active {
		background-color: #f8f8f8;
	}
	.file-operation .download {
		padding: 10upx 0;
	}
	.file-operation .download .text {
		color: #636463;
		font-size: 28upx !important;
	}
	.file-operation .download .iconfont {
		font-size: 32upx !important;
		color: $maincolor !important;
		margin-right: 8upx;
	}
</style>
